<template>
  <!--  <el-row :gutter="40">-->
  <!--    <el-col :lg="24">-->
  <!--      <el-form :inline="true" :model="queryParams" label-position="right" size="small" class="filter-form-inline">-->
  <!--        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">-->
  <!--          <el-col :lg="6" :xs="8">-->
  <!--            <el-form-item label="关键字" style="width: 100%">-->
  <!--              <el-input v-model="queryParams.keyWord" clearable placeholder="输入名称、编号、代征码、所在地区、详细地址" />-->
  <!--            </el-form-item>-->
  <!--          </el-col>-->
  <!--          <el-col :lg="4" :xs="4">-->
  <!--            <el-form-item style="width: 100%">-->
  <!--              <el-button class="border-btn" @click="handlReset">重置</el-button>-->
  <!--              <el-button type="primary" class="main-btn" @click="handlSearch">搜索</el-button>-->
  <!--            </el-form-item>-->
  <!--          </el-col>-->
  <!--        </el-row>-->
  <!--      </el-form>-->
  <!--    </el-col>-->
  <!--  </el-row>-->

  <table-view :data="tableData" header-cell-class-name="table-header" size="medium" border @row-click="aloneClick"
    :cell-style="cellStyle">
    <el-table-column prop="agentNo" label="人员编号" header-align="center" :show-overflow-tooltip="true" />
    <el-table-column prop="userName" label="姓名" header-align="center" :show-overflow-tooltip="true" />
    <el-table-column prop="tel" label="联系电话" align="center" :show-overflow-tooltip="true" />
    <el-table-column prop="address" label="联系地址" align="center" :show-overflow-tooltip="true" />
    <el-table-column prop="createdAt" label="创建时间" sortable="custom" align="center" :show-overflow-tooltip="true" >
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM:SS",row.createdAt) }}
      </template>
    </el-table-column>
    <el-table-column prop="creatorName" label="创建人" align="center" :show-overflow-tooltip="true" />
    <el-table-column prop="terminalStatus" label="状态" align="center" :show-overflow-tooltip="true">
      <template #default="{row}">
        {{ getLabel('reAgentStatus',row?.reAgentStatus) }}
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="{row}">
        <el-button v-auth="{v:['crm:editorial:partTime:dealWith'],bool:row?.reAgentStatus === '1'}" type="text"
          @click="handlChange(row.id)">处理结束</el-button>
      </template>
    </el-table-column>
  </table-view>

  <Pagination v-model:page="queryParams.page" v-model:limit="queryParams.pageSize"
    style="display: flex; justify-content: flex-end" :total="total" @pagination="handlList" />
</template>

<script>
import {getCurrentInstance, inject, onMounted, reactive, toRefs,} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "PartTime",
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    const currentInstance = getCurrentInstance();
    var data = reactive({
      queryParams: {
        keyWord: "",
        pageSize: 20,
        page: 1,
        agentType: "agent_person",
      },
      tableData: [],
      total: 0,
    });

    // 获取列表
    const handlList = () => {
      api.editorial.EDITORIAL_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    const handlReset = () => {
      data.queryParams = {
        keyWord: "",
        pageSize: 20,
        page: 1,
      };
      handlList();
    };

    // 搜索
    const handlSearch = () => {
      data.queryParams.page = 1;
      handlList();
    };

    const handlChange = (id) => {
      currentInstance.proxy
        .alertBox({
          message: "确定将推荐代理信息更改为已处理？",
        })
        .then(() => {
          api.editorial.EDITORIAL_WITH(id).then((res) => {
            if (res.code === 0) {
              handlList();
            } else {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    const aloneClick = (row, column, event) => {
      if (column.label === "操作") return;
      router.push({
        path: "/editorial/advanceAgent/partTimeDetail",
        query: { id: row.id },
      });
    };

    const cellStyle = () => {
      return "cursor:pointer;";
    };

    //* **************************************
    onMounted((_) => {
      handlList();
    });
    //* **************************************
    return {
      ...toRefs(data),
      handlReset,
      handlSearch,
      handlList,
      handlChange,
      aloneClick,
      cellStyle,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
